<template>
  <div class="message-container">
    <el-table
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column v-if="false" prop="templateId" label="模板ID" width="100" />
      <el-table-column prop="templateName" label="模板名" width="200" />
      <el-table-column prop="templateContent" label="模板内容" width="600" />
    </el-table>

    <el-dialog title="新增模板" :visible.sync="addDialogVisible" width="30%" center>
      <el-form ref="templateForm" :model="templateForm" :rules="templateRules" label-width="85px">
        <!-- <el-form-item label="模板ID" prop="templateId" v-if="false">
          <el-input ref="templateId" v-model="templateForm.templateId" disabled
            placeholder="请输入原密码" name="templateId" class="len"/>
        </el-form-item> -->
        <el-form-item label="模板名" prop="templateName">
          <el-input
            ref="templateName"
            v-model="templateForm.templateName"
            placeholder="请输入模板名"
            name="templateName"
            class="len"
            clearable
          />
        </el-form-item>
        <el-form-item label="模板内容" prop="templateContent">
          <el-input
            ref="templateContent"
            v-model="templateForm.templateContent"
            placeholder="请输入模板内容"
            name="templateContent"
            class="len"
            clearable
            type="textarea"
            :rows="3"
            maxlength="70"
            show-word-limit
          />
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="addCancel()">取 消</el-button>
        <el-button type="primary" @click="add(templateForm)">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="模板修改" :visible.sync="editDialogVisible" width="30%" center>
      <el-form ref="templateForm" :model="templateForm" :rules="templateRules" label-width="85px">
        <el-form-item v-if="false" label="模板ID" prop="templateId">
          <el-input
            ref="templateId"
            v-model="templateForm.templateId"
            disabled
            placeholder="请输入原密码"
            name="templateId"
            class="len"
          />
        </el-form-item>
        <el-form-item label="模板名" prop="templateName">
          <el-input
            ref="templateName"
            v-model="templateForm.templateName"
            placeholder="请输入模板名"
            name="templateName"
            class="len"
            clearable
          />
        </el-form-item>
        <el-form-item label="模板内容" prop="templateContent">
          <el-input
            ref="templateContent"
            v-model="templateForm.templateContent"
            placeholder="请输入模板内容"
            name="templateContent"
            class="len"
            clearable
            type="textarea"
            :rows="3"
            maxlength="70"
            show-word-limit
          />
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="editCancel()">取 消</el-button>
        <el-button type="primary" @click="edit(templateForm)">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { queryTemplateList, addTemplate, modifyTemplate, deleteTemplate } from '@/api/sys'
import store from '@/store'
import { MessageBox } from 'element-ui'
import { getUserInfo } from '@/api/user.js'
import router from '@/router'
import { getToken } from '@/utils/auth'
export default {
  data() {
    return {
      tableData: [],
      templateForm: {
        templateId: '',
        templateName: '',
        templateContent: ''
      },
      templateRules: {
        templateName: [{ required: true, trigger: 'blur', message: '请输入模板名' }],
        templateContent: [{ required: true, trigger: 'blur', message: '请输入模板内容' }]
      },
      addDialogVisible: false,
      editDialogVisible: false

    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() { // 初始化数据
      console.log('1111')
      queryTemplateList().then(res => {
        console.log(res)
        this.tableData = res.list
      }).catch(err => {
        console.log(err)
      })
    },
    handleAdd() { // 打开新增对话框
      this.templateForm = {}
      this.addDialogVisible = true
    },
    addCancel() { // 关闭新增对话框
      // this.initData();
      this.templateForm = {}
      this.addDialogVisible = false
    },
    add(val) { // 新增模板
      this.$refs.templateForm.validate(valid => {
        if (valid) {
          addTemplate({
            'templateName': val.templateName,
            'templateContent': val.templateContent
          }).then(res => {
            this.sucMsg('新增成功')
            this.initData()
            this.templateForm = {}
            this.addDialogVisible = false
          }).catch(err => {
            console.log(err)
          })
        } else {
          this.warnMsg('请完成表单再提交')
          return false
        }
      })
    },
    handleEdit(val) { // 打开修改对话框
      getUserInfo().then(res => {
        if (res.userId === 'guest' || !getToken()) {
          MessageBox.alert('用户登录已过期，请重新登录', '提示', {
            confirmButtonText: '确定',
            callback: action => {
              store.dispatch('user/logout').then(() => {
                router.push('/login')
              })
            }
          })
        } else {
          this.templateForm = val
          this.editDialogVisible = true
        }
      })
    },
    editCancel() { // 关闭修改对话框
      this.initData()
      this.templateForm = {}
      this.editDialogVisible = false
    },
    edit(val) { // 修改模板
      this.$refs.templateForm.validate(valid => {
        if (valid) {
          modifyTemplate({
            'templateId': val.templateId,
            'templateName': val.templateName,
            'templateContent': val.templateContent
          }).then(res => {
            this.sucMsg('修改成功')
            this.initData()
            this.templateForm = {}
            this.editDialogVisible = false
          }).catch(err => {
            console.log(err)
          })
        } else {
          this.warnMsg('请完成表单再提交')
          return false
        }
      })
    },
    handleDel(val) { // 删除模板
      this.$confirm('本次操作将删除模板【' + val.templateName + '】, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteTemplate(val.templateId).then(res => {
          this.sucMsg('模板【' + val.templateName + '】已删除')
          this.initData()
        }).catch(err => {
          console.log(err)
        })
      }).catch(() => {
        this.infoMsg('已取消删除')
      })
    },
    infoMsg(msg) { // 普通信息
      this.$message({
        message: msg,
        type: 'info',
        duration: 3 * 1000
      })
    },
    warnMsg(msg) { // 警告信息
      this.$message({
        message: msg,
        type: 'warning',
        duration: 3 * 1000
      })
    },
    errorMsg(msg) { // 错误信息
      this.$message({
        message: msg,
        type: 'error',
        duration: 3 * 1000
      })
    },
    sucMsg(msg) { // 成功信息
      this.$message({
        message: msg,
        type: 'success',
        duration: 3 * 1000
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.message {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.len{
  width: 300px;
}
</style>
